<template>
  <!--顾问详情-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <v_menu :title="data.title" :site="data.list[activeIndex].list"></v_menu>

    <Row :gutter="16" class="wrapper">
      <i-col span="19" class="content">
        <Row :gutter="16">
          <i-col span="6" class="figure" style="background: #f3f3f3;">
            <div class="industry">
              <img :src='advisoryDetails.phoneUri' alt="">
              <h3 style="font-size: 18px">{{advisoryDetails.name}}</h3>
              <div class="counselor">
                <span class="office" v-for="(adviserResume,index) in advisoryDetails.adviserResume">
                  <div style="font-size: 12px;margin: 3px 6px">{{adviserResume.position}}</div>
                </span>
              </div>
            </div>
          </i-col>
          <i-col span="17" class="figure" style="font-size: 13px;line-height: 25px">
            <P style="background-color: #f3f3f3;font-size: 16px;margin-top: -10px;margin-bottom: 10px;padding: 5px;">
              个人简介</P>
            <span style="display: inline-block;margin: 10px;" v-html="advisoryDetails.particulars"></span>
          </i-col>
        </Row>
      </i-col>
      <i-col span="5" class="navigation">
        <ngn :data="data" :activeIndex="activeIndex"></ngn>
      </i-col>
    </Row>

  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'
  import v_menu from '../module/menu'

  export default {
    components: {carousel, ngn, v_menu},
    data() {
      return {
        /*轮播*/
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        autoplaySpeed: 100000,
        /*导航*/
        activeIndex: 1,
        data: {
          title: '关于机构',
          list: [
            {list: '机构介绍', link: 'organizationIntroduce'},
            {list: '专家顾问', link: '/consultants'},
            {list: '组织结构', link: '/organizationStructure'},
            {list: '联系方式', link: '/contactWay'},
            {list: '期刊加盟', link: '/journalsJoin'},
          ]
        },
        /*顾问详情*/
        advisoryDetails: ''
      }
    },
    mounted() {
      if (this.$route.query.id) {
        this.advisoryDetailsGet()
      }
    },
    methods: {
      /*顾问详情*/
      advisoryDetailsGet() {
        this.$axios.get(this.$api.url + '/adviser/particulars/' + this.$route.query.id).then((res) => {
          if (res.data.code) {
            this.advisoryDetails = res.data.data[0];
          }
        });
      },
    }
  }
</script>

<style scoped>
  /*主要内容*/
  .wrapper .content {
    border-right: 1px solid #ccc;
    min-height: 300px;
  }

  .wrapper .navigation {
    padding-left: 0 !important;
  }

  .wrapper .content .figure {
    margin: 10px !important;
    border-radius: 5px;
    padding: 10px;
  }

  .wrapper .content .industry {
    text-align: center;
  }

  .wrapper .content .industry img {
    width: 150px;
    height: 150px;
    border-radius: 100px;
    border: 1px solid #ccc;
  }

  .wrapper .content .counselor {
    text-align: left;
  }

  .wrapper .content .counselor .office {
    font-size: 18px;
    font-weight: bold;
  }
</style>
